<template>
    <!--请注意"title"属性值是必须的. "back"属性如果存在就会显示后退按钮-->
    <ui-main>
        <!--可折叠的工具栏-->
        <div slot="topAccordion" class="p-l-10 p-r-10" name="高级搜索">
            <el-tabs v-model="activeName">
                <el-tab-pane label="按条件筛选" name="first">
                    <ui-screening v-model="searchData" @reset="resetCallback" @search="searchCallback">
                        <ui-screening-row label="单选">
                            <ui-screening-radio v-model="searchData.radio"/>
                        </ui-screening-row>
                        <ui-screening-row label="多选">
                            <ui-screening-checkbox v-model="searchData.checkbox"/>
                        </ui-screening-row>
                    </ui-screening>
                </el-tab-pane>
                <el-tab-pane label="自定义查询" name="second">
                    <ui-screening v-model="searchData" @reset="resetCallback" @search="searchCallback">
                        <ui-screening-row label="嵌入组件">
                            <el-input placeholder="请输入网址" v-model="searchData.input1" size="small" style="width:150px">
                                <template slot="prepend">http://</template>
                            </el-input>
                            <el-input placeholder="请输入邮箱" v-model="searchData.input2" size="small" style="width:150px">
                                <template slot="prepend">email:</template>
                            </el-input>
                            <el-select v-model="searchData.selected" placeholder="请选择" size="small">
                                <el-option v-for="item in searchData.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </ui-screening-row>
                        <ui-screening-row label="flex布局" flex>
                            <el-input placeholder="请输入网址" v-model="searchData.input1" size="small" style="width:150px">
                                <template slot="prepend">http://</template>
                            </el-input>
                            <el-input placeholder="请输入邮箱" v-model="searchData.input2" size="small" style="width:150px">
                                <template slot="prepend">email:</template>
                            </el-input>
                            <el-select v-model="searchData.selected" placeholder="请选择" size="small">
                                <el-option v-for="item in searchData.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </ui-screening-row>
                    </ui-screening>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!--顶部按钮  slot="toolbar"代表其中的内容为菜单按钮-->
        <span slot="toolbar">
            <div @click="openModel" class="ui vertical animated mini button m-r-10 basic grey ">
                <div class="hidden content">刷新</div>
                <div class="visible content">
                    <i class="icon refresh"></i>
                </div>
            </div>
            <span class="parting-line"></span>

            <el-pagination v-if="show" class="fl-r" small background
                :layout="total > pageSize ? 'total, prev, pager, next, sizes':'total, sizes'"
                :total="total"
                :page-size="pageSize"
                :page-sizes="[20, 50, 100, 200, 500]">
            </el-pagination>
        </span>
        <!-- 下面放置页面内容 -->
        <div class="item one">
            <ui-load-md no-bar file="ui-main"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    // import _ from 'lodash' // 对比对象
    export default {
        name: '',
        data () {
            return {
                show:false,
                total: 0,
                totalPages: 100,
                pageNumber: 1,
                pageSize: 20,
                activeName: 'first',
                searchData: {
                    radio: [
                        { id: 1, name: '草莓' },
                        { id: 2, name: '橡胶' },
                        { id: 3, name: '葡萄' },
                        {
                            id: 4,
                            name: '奶子',
                            checked: true
                        }
                    ],
                    checkbox: [
                        { id: 1, name: '冰淇淋' },
                        { id: 2, name: '可乐' },
                        { id: 3, name: '烤肉' },
                        { id: 4, name: '海洛因' }
                    ],
                    input1: '',
                    input2: '',
                    options: [
                        { value: '选项1', label: '黄金糕' },
                        { value: '选项2', label: '双皮奶' },
                        {
                            value: '选项3',
                            label: '蚵仔煎'
                        },
                        { value: '选项4', label: '龙须面' },
                        { value: '选项5', label: '北京烤鸭' }
                    ],
                    selected: '',
                    time: ''
                }

            }
        },
        methods: {
            openModel () {
                this.show = !this.show
                /*this.$router.push({
                    path: '/pages_PersonnelManagement_PersonnelList/edit',
                    query: { backpath: this.$route.path, model: true }
                })*/
            },
            openFlat () {
                this.$router.push({
                    path: '/pages_PersonnelManagement_PersonnelList/view',
                    query: { backpath: this.$route.path }
                })
            },
            resetCallback () {
                this.$message('所有数据已重置!')
            },
            searchCallback (data) {
                this.$message('查询结果见控制台')
                console.log('查询数据:', data)
            }
        }
    }
</script>
